/*
 * Copyright (c) 2022. China Mobile (SuZhou) Software Technology Co.,Ltd. All rights reserved.
 * Lakehouse is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *          http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */

.container {
  display: flex;
  .tree-switch {
    cursor: pointer;
    transform: rotate(90deg);
    position: absolute;
    top: 50%;
    z-index: 1000;
    left: 174px;
    color: white;
    width: 67px;
    height: 10px;
    transition: left 0.3s ease-in-out;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #fff;
      transform: scaleY(4) perspective(45px) rotateX(75deg);
      transform-origin: top;
    }

    & > i {
      display: inline-block;
      position: relative;
    }
  }

  .contentBox {
    position: absolute;
    left: 200px;
    right: 0;
    top: 47px;
    bottom: 0;
    -webkit-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
    background: #f0f0f0;

    :global(.n-tabs-nav) {
      background-color: #fff;
    }

    :global(.n-tabs
        .n-tabs-nav.n-tabs-nav--card-type
        .n-tabs-tab.n-tabs-tab--active) {
      border: none;
      border-bottom: 2px solid #4759E4;
      padding-right: 12px;
      padding-left: 16px;
      min-width: 50px;
      text-align: center;
    }

    :global(.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab) {
      border: none;
      padding-right: 18px;
      padding-left: 14px;
      border-radius: 0;
    }

    :global(.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab-pad) {
      width: 0;
    }
  }

  .console {
    min-width: 1150px;
  }

  .routerSlot {
    width: auto;
    padding: 5px 14px 0 15px;
    box-sizing: border-box;
    min-height: auto;
  }

  .content-collapse {
    left: 65px;
  }
}

/** tree */

/** default page tsx */
.defaultPage {
  text-align: center;
  width: 400px;
  height: 230px;
  margin-top: calc(50vh - 120px);
  margin-left: calc(50vw - 305px);

  .tip {
    font-size: 13px;
    text-align: center;

    span {
      color: #337dff;

      &:hover {
        cursor: pointer;
        color: rgb(18, 93, 255, 0.96);
      }
    }
  }

  .bgImg {
    height: 240px;
    background: url(/src/assets/images/sqlconsole/default.png) 100% no-repeat;
  }

  .text {
    color: #555;
  }
}

/** data tree tsx */
.dataTree {
  width: 184px;
  background-color: #fff;
  padding: 0 8px 0 8px;
  height: calc(100vh - 55px);
  position: relative;

  .optionHeader {
    padding: 15px 0;
    font-size: 14px;

    :global(.n-button) {
      width: 0px;
      height: 0px;
      padding: 12px 12px 14px 14px;
    }

    .title {
      font-size: 14px;
      font-weight: 600;
      display: inline-block;
      height: 18px;
      vertical-align: baseline;
    }

    .refresh {
      float: right;
      line-height: 1.8;
      &:hover {
        color: rgba(51, 125, 255, 1);
        cursor: pointer;
      }
    }

    i {
      font-size: 14px;
      margin-right: 2px;
      font-weight: 400;
      vertical-align: middle;
      display: inline-block;
    }

    .tip {
      font-size: 12px;
      height: 16px;
      vertical-align: text-top;
      display: inline-block;
      margin-left: 2px;
    }
  }

  .createDatabase {
    width: 188px;

    :global(.n-button) {
      width: 100%;
      text-align: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .button {
      margin-bottom: 10px;
    }
  }

  .treeContent {
    height: calc(100vh - 195px);
    overflow: auto;
  }

  .loading {
    margin-top: 10px;
  }

  .header {
    background: #fff;
    margin-right: 8px;
    .createDatabaseBtn {
      width: 100%;
      margin-bottom: 10px;
    }
  }

  .default {
    margin-top: 50px;
    text-align: center;
    font-size: 13px;

    > i {
      font-size: 16px;
      vertical-align: text-bottom;
      margin-right: 3px;
    }
  }
}
